<template>
    <div class="follow">
        <div class="header">{{ $t('msg.关注') }}</div>
        <div class="content">
            <div class="lemon-sidebar__scroll list">
                <div class="item" v-for="(item, index) in list" :key="index" :class="active == index ? 'active' : ''"
                    @click="active = index">
                    <img :src="item.to_user.avatar" alt="" class="avatar">
                    <div class="name">{{ item.to_user.nickname }}{{ index }}</div>
                    <div class="cancel" @click.stop="unfollow(item)">{{ $t('msg.取关') }}</div>
                </div>
            </div>
        </div>
        <div style="display: flex;align-items: center;justify-content: center;">
            <el-pagination background layout="prev, pager, next" :current-page="page" :total="total"
                @current-change="change" />
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    data() {
        return {
            active: -1,
            page: 1,
            list: [],
            total: 0
        }
    },
    computed: {
        ...mapState(['contactKeywords'])
    },
    watch: {
        contactKeywords: {
            handler(newVal) {
                this.keywords = newVal;
                this.getList();
            },
            immediate: true
        }
    },
    methods: {
        async getList() {
            let { list: res } = await this.$api.usersApi.followList({
                page: this.page,
                page_size: 30,
                keyword: this.keywords
            });
            this.total = res.total;
            this.list = res.data;
        },
        change(value) {
            this.page = value;
            this.getList();
        },

        async unfollow(item) {
            await this.$api.usersApi.unfollow({
                to_user_id: item.to_user_id,
            })
            this.page = 1;
            this.getList();
        }
    }
}
</script>
<style lang="scss" scoped>
.follow {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #fff;

    .header {
        height: 92px;
        line-height: 92px;
        font-size: 20px;
        color: #333333;
        padding: 0 24px;
        box-sizing: border-box;
        background: #FCFCFE;
        box-shadow: inset 0px -1px 0px 0px rgba(104, 104, 104, 0.1);
    }

    .content {
        flex: 1;
        display: flex;
        overflow: hidden;

        .list {
            width: 430px;
            cursor: default;
            overflow-y: auto;

            .item {
                height: 88px;
                padding: 10px 24px;
                box-sizing: border-box;
                display: flex;
                align-items: center;

                &.active {
                    background-color: #D9E7FE;
                }

                &:hover:not(&.active) {
                    background: #e3e3e3
                }

                .avatar {
                    width: 52px;
                    height: 52px;
                    border-radius: 4px 4px 4px 4px;
                }

                .name {
                    flex: 1;
                    padding: 0 12px;
                    box-sizing: border-box;
                    font-size: 18px;
                    color: #333333;

                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .cancel {
                    width: 68px;
                    height: 34px;
                    line-height: 34px;
                    text-align: center;
                    font-size: 18px;
                    color: #7F7F7F;
                    border-radius: 66px 66px 66px 66px;
                    border: 1px solid #7F7F7F;
                    box-sizing: content-box;
                    cursor: pointer;
                }
            }
        }
    }
}
</style>